<template>
  <div style="margin: 100px">
    <!--  基本用法  -->
    <div class="demo-inner-divider">基本用法-popconfirm出现位置</div>
    <div class="popconfirm-box">
      <div class="popconfirm-top">
        <e-popconfirm width="100" placement="top-start" title="我是标题" content="上左">
          <e-button>上左</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="top" title="我是标题" content="正上">
          <e-button>正上</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="top-end" title="我是标题" content="上右">
          <e-button>上右</e-button>
        </e-popconfirm>
      </div>
      <div class="popconfirm-left">
        <e-popconfirm width="100" placement="left-start" title="我是标题" content="左上">
          <e-button>左上</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="left" title="我是标题" content="正左">
          <e-button>正左</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="left-end" title="我是标题" content="左下">
          <e-button>左下</e-button>
        </e-popconfirm>
      </div>
      <div class="popconfirm-right">
        <e-popconfirm width="100" placement="right-start" title="我是标题" content="右上">
          <e-button>右上</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="right" title="我是标题" content="正右">
          <e-button>正右</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="right-end" title="我是标题" content="右下">
          <e-button>右下</e-button>
        </e-popconfirm>
      </div>
      <div class="popconfirm-bottom">
        <e-popconfirm width="100" placement="bottom-start" title="我是标题" content="下左">
          <e-button>下左</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="bottom" title="我是标题" content="正下">
          <e-button>正下</e-button>
        </e-popconfirm>
        <e-popconfirm width="100" placement="bottom-end" title="我是标题" content="下右">
          <e-button>下右</e-button>
        </e-popconfirm>
      </div>
    </div>
    <!--  popconfirm触发方式  -->
    <div class="demo-inner-divider" style="margin-top: 20px;">触发方式-hover click focus，默认click触发</div>
    <div class="popoconfirm-trigger-box">
      <e-popconfirm
        width="100"
        trigger="hover"
        placement="bottom"
        title="我是标题"
        content="悬浮触发">
        <e-button>Hover</e-button>
      </e-popconfirm>
      <e-popconfirm
        width="100"
        trigger="click"
        placement="bottom"
        title="我是标题"
        content="点击触发">
        <e-button>Click</e-button>
      </e-popconfirm>
      <e-popconfirm
        width="100"
        trigger="focus"
        placement="bottom"
        title="我是标题"
        content="聚焦触发">
        <e-button>Focus</e-button>
      </e-popconfirm>
    </div>
    <!--  popconfirm自定义内容  -->
    <div class="demo-inner-divider" style="margin-top: 20px;">自定义popconfirm</div>
    <div class="customization-box">
      <div class="mg-l-40">
        <div class="description-content" style="margin: 10px 0;">自定义popconfirm-title</div>
        <div>
          <div>通过title插槽可以对popconfirm标题进行自定义</div>
          <e-popconfirm
            trigger="hover"
            placement="top"
            content="悬浮触发">
            <e-button>自定义title</e-button>
            <template #title>
              <span><e-icon type="member"></e-icon>我是自定义标题</span>
            </template>
          </e-popconfirm>
        </div>
        <div class="description-content" style="margin: 10px 0;">自定义popconfirm-content</div>
        <div>
          <div>通过content插槽可以对popconfirm内容进行自定义</div>
          <e-popconfirm
            trigger="click"
            placement="bottom"
            :visible-arrow="false">
            <e-button>自定义title</e-button>
            <template #content>
              <div class="self-dropdown-box">
                <ul class="haloe-select-dropdown-list">
                  <li
                    class="haloe-select-item"
                    v-for="item in cityList"
                    :key="item.code"
                    :value="item.code">
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </template>
          </e-popconfirm>
        </div>
      </div>
    </div>
    <!--  confirm气泡确认框模式  -->
    <div class="demo-inner-divider" style="margin-top: 20px;">气泡确认框模式</div>
    <div class="pop-box">
      <e-popconfirm
        placement="bottom"
        confirm
        title="确认删除这条内容？"
        @on-ok="ok"
        @on-cancel="cancel">
        <e-button>气泡确认</e-button>
      </e-popconfirm>
    </div>
    <div class="demo-inner-divider" style="margin-top: 20px;">特殊使用</div>
    <div>
      <div class="mg-l-40">
        <div class="description-content" style="margin: 10px 0;">v-model控制popconfirm</div>
        <e-popconfirm v-model="showPop" title="关闭popcomfirm" placement="top">
          <e-button>从我头上显示popconfirm</e-button>
          <template #content>
            <e-button type="primary" @click="showPop = false">确定关闭</e-button>
          </template>
        </e-popconfirm>
      </div>
      <div>
        <div class="description-content" style="margin: 10px 0;">去除popconfirm指示小箭头</div>
        <e-popconfirm
          width="100"
          trigger="click"
          placement="bottom"
          title="我是标题"
          content="去除指示小箭头"
          :visibleArrow="false">
          <e-button>去除popconfirm指示小箭头</e-button>
        </e-popconfirm>
      </div>
    </div>
  </div>
  <!-- API说明 -->
  <popconfirm-md class="markdown-body"></popconfirm-md>
</template>

<script>
import popconfirmMd from '../../docs/popconfirm.md'

export default {
  components: {
    popconfirmMd
  },
  data () {
    return {
      showPop: false,
      cityList: [
        { name: '南京', code: '3201' },
        { name: '无锡', code: '3202' },
        { name: '徐州', code: '3203' },
        { name: '常州', code: '3204' },
        { name: '苏州', code: '3205' }
      ]
    }
  },
  methods: {
    ok () {
      window.confirm('确定删除')
    },
    cancel () {
      window.confirm('取消删除')
    }
  }
};
</script>

<style scoped >
  .description-content {
    color: #6236FF;
  }
  .popconfirm-box {
    width: 400px;
    margin-left: 100px;
  }
  .popconfirm-top {
    text-align: center;
  }
  .popconfirm-top .haloe-btn {
    margin: 0 10px;
  }
  .popconfirm-left {
    float: left;
    width: 60px;
  }
  .popconfirm-left .haloe-btn {
    margin: 10px 0;
  }
  .popconfirm-right {
    float: right;
    width: 60px;
  }
  .popconfirm-right .haloe-btn {
    margin: 10px 0;
  }
  .popconfirm-bottom {
    clear: both;
    text-align: center;
  }
  .popconfirm-bottom .haloe-btn {
    margin: 0 10px;
  }
  .popoconfirm-trigger-box .haloe-btn{
    margin: 0 10px;
  }
</style>
